// 导入 createApp 函数用于创建 Vue 应用实例
import { createApp } from "vue";

// 导入全局样式文件（确保在组件之前加载）
// import "./style.css";

// 导入根组件 App.vue
import App from "./App.vue";

// 导入 SVG 图标自动注册脚本（由 vite-plugin-svg-icons 提供）
// 作用：自动注册 src/icons 目录下的所有 SVG 图标
import "virtual:svg-icons-register";

// 导入路由配置实例
import router from "./router";

// 导入 Element Plus 的所有图标组件（按需导入）
// 使用命名空间导入：将整个图标库作为对象导入
import * as ElementPlusIconsVue from "@element-plus/icons-vue";

import {createPinia} from 'pinia'

import "@/api/mock.ts"

import api from "./api/api";

// 创建 Vue 应用实例，传入根组件
const app = createApp(App);

const pinia = createPinia();

app.config.globalProperties.$api = api;
// 使用路由插件并挂载应用到 #app DOM 元素
// 注意：此时应用尚未注册图标组件
app.use(router).mount("#app");

app.use(pinia);

// 动态注册所有 Element Plus 图标为全局组件
// 使用 Object.entries() 遍历图标对象
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  // 将每个图标注册为全局组件
  // key: 图标名称（如 "Search", "Edit"）
  // component: 图标对应的 Vue 组件对象
  app.component(key, component);
}

// 注意：图标注册在挂载之后执行
// 在 Vue3 中这种操作是允许的，但通常建议在挂载前完成组件注册
// 这种写法可能导致首次渲染时图标不可用（但会在注册后更新）
